<template>
	<view class="cloud-mall" :style="[{paddingTop: StatusBar+'px'}]">
		<default-bar bgColor="bg-gradual-cloud-samll" :fixed="true"></default-bar>
		<view class="small-header">
			<view class="title">云商城</view>
			<view class="input-search">
				<icon type="search" :size='14' name="search" color='#999'></icon>
				<input type="text" placeholder="积分兑换领好物" placeholder-class="place-search" disabled @click="nav" data-url="/pages/cloudMall/cookSearch"/>
			</view>
		</view>
		<view class="tab-bar">
			<view class="item-bar" v-for="(item,index) in tabBar" :key='index' @click="nav" :data-url="item.path?item.path:''">
				<image :src="item.catImg" mode=""></image>
				<text>{{item.catName}}</text>
			</view>
		</view>
		<!-- 元欢乐购 -->
		<view class="module" style="padding: 0;">
			<view class="module-head" style="padding: 0 20rpx;">
				<view class="left">积分欢乐购</view>
				<view class="right"  @click="nav" data-url="/pages/cloudMall/scordHappy">
					<text>更多</text>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/could-right.png" mode=""></image>
				</view>
			</view>
			<view class="swiper">
				<!-- scroll-left="12" -->
				<scroll-view class="scroll-view_H" scroll-x @scroll="scroll" show-scrollbar="false">
					<block v-for="(item,index) in scordList" :key="index" >
						<view class="zero-item" @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
							<view class="zero-content">
								<image :src="item.goodsImg" mode=""></image>
								<view class="zer-info">
									<view class="text-cut">{{item.goodsName}}</view>
									<view>
										<text class="text-colorP text-price" v-if="item.shopPrice!=0">{{item.shopPrice}}</text>
										<text class="text-colorP" v-if="item.integral!=0 && item.shopPrice!=0">+</text>
										<text class="text-colorP" v-if="item.integral!=0">{{item.integral}}</text>
										<text v-if="item.integral!=0" style="color: #333333;font-size: 24rpx;">积分</text>
									</view>
									<view class="">市场价：<text class="text-price">{{item.marketPrice}}</text></view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 巧厨乐专区 -->
		<view class="module">
			<view class="module-head">
				<view class="left">巧厨乐专区</view>
				<view class="right" @click="nav" data-url="/pages/cloudMall/qiaochule">
					<text>更多</text>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/could-right.png" mode=""></image>
				</view>
			</view>
			<view class="cooks-cont">
				<view class="cook-item" v-for="(item,index) in qiaoChuList" :key="index"  @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
					<image :src="item.goodsImg"
					 mode=""></image>
					<view class="cook-info">
						<text class="text-cut">{{item.goodsName}}</text>
						<text class="text-price  text-colorP">{{item.shopPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他好物商品 -->
		<view class="module" style="display: none;">
			<view class="module-head" style="height:80rpx;padding-top:15rpx;">
				<view class="left">其他好物</view>
				<view class="right"></view>
			</view>
			<view class="other-goods">
				<view class="other-item">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190909163718.jpg"
					 mode=""></image>
					<view class="other-info">
						<view class="">奥林格烧水壶家用保温一体自动宿舍学生小型热水电水开水电热电壶</view>
						<view class="">
							<view>马上抢购</view>
							<view class="">
								<text class="text-colorP">480</text>
								<text>积分</text>
							</view>
						</view>
					</view>
				</view>
				<view class="other-item">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190909163718.jpg"
					 mode=""></image>
					<view class="other-info">
						<view class="">奥林格烧水壶家用保温一体自动宿舍学生小型热水电水开水电热电壶</view>
						<view class="">
							<view>马上抢购</view>
							<view class="">
								<text class="text-colorP">480</text>
								<text>积分</text>
							</view>
						</view>
					</view>
				</view>
				<view class="other-item">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190909163718.jpg"
					 mode=""></image>
					<view class="other-info">
						<view class="">奥林格烧水壶家用保温一体自动宿舍学生小型热水电水开水电热电壶</view>
						<view class="">
							<view>马上抢购</view>
							<view class="">
								<text class="text-colorP">480</text>
								<text>积分</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				tabBar: [],
				qiaoChuList:[],
				scordList:[]
			}
		},
		onLoad() {
			this.getTab()
			this.getQiaoChu()
			this.getProduct()
		},
		methods: {
			scroll() {},
			// 路由跳转
			nav(e){
				var url = e.currentTarget.dataset.url
				if(url){
					uni.navigateTo({
						url: url
					});
				}else{
					uni.showToast({
						title:'敬请期待',
						icon:'none'
					})
				}
				
			},
			// 获取巧厨乐(热品)
			getTab() {
				var that = this;
				this.$request({
					url: '/ShopGoodsCats/get_cats',
					success: res => {
						if (res.data.status == 1) {
							that.tabBar = res.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取巧厨乐(热品)
			getQiaoChu() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data:{
						shopId: '3',
						page:1,
						isBest:1
					},
					success: res => {
						if (res.data.status == 1) {
							that.qiaoChuList = res.data.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 积分欢乐购
			getProduct() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data:{
						shopId: '2',
						page:1,
						isBest:1,
						goodsCatId:5
					},
					success: res => {
						if (res.data.status == 1) {
							that.scordList = res.data.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style scoped>
	.cloud-mall {
		width: 100%;
		overflow: hidden;
	}

	.small-header {
		width: 100%;
		height: 276rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/could-bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.small-header .title {
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		color: #ffffff;
		margin-bottom: 40rpx;
	}

	.small-header .input-search {
		width: 702rpx;
		height: 72rpx;
		background-color: #ffffff;
		box-shadow: inset 0rpx 3rpx 7rpx 0rpx rgba(205, 36, 11, 0.35);
		border-radius: 8rpx;
		margin: 0 auto !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.small-header .input-search input {
		margin-left: 10rpx;
		height: 72rpx;
		flex: 1;
	}

	.tab-bar {
		width: 100%;
		height: 221rpx;
		background-color: #ffffff;
		padding: 0 24rpx;
		display: flex;
		align-items: center;

	}

	.tab-bar>.item-bar {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.tab-bar>.item-bar image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}

	.tab-bar>.item-bar text {
		font-size: 26rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	/* 模块开始 */
	.module {
		width: 100%;
		padding: 0 24rpx;
		background: #fff;
	}

	.module .module-head {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.module .module-head .left {
		font-size: 36rpx;
		letter-spacing: 2rpx;
		color: #333333;
		font-weight: bold;
	}

	.module .module-head .right {
		display: flex;
		align-items: center;
	}

	.module .module-head .right text {
		color: #999999;
		font-size: 28rpx;
	}

	.module .module-head .right image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.cooks-cont {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.cooks-cont .cook-item {
		width: 220rpx;
		border-radius: 8rpx;
		margin-right: 21rpx;
		/* box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(205, 205, 205, 0.5); */
	}

	.cooks-cont .cook-item:nth-child(3n) {
		margin-right: 0 !important;
	}

	/* 两行是显示 margin */

	.cooks-cont .cook-item:nth-child(4) {
		margin-top: 30rpx;
	}

	.cooks-cont .cook-item:nth-child(5) {
		margin-top: 30rpx;
	}

	.cooks-cont .cook-item:nth-child(6) {
		margin-top: 30rpx;
	}

	.cooks-cont .cook-item image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
	}

	.cooks-cont .cook-item .cook-info {
		width: 100%;
		padding: 0 12rpx;
		box-sizing: border-box;
	}

	.cooks-cont .cook-item .cook-info text:nth-child(1) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		display: block;
		max-width: 220rpx;
	}

	.cooks-cont .cook-item .cook-info text:nth-child(2) {
		line-height: 34rpx;
		letter-spacing: 1rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.swiper {
		width: 750rpx;
		/* overflow: hidden; */
		box-sizing: border-box;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 750rpx;
	}

	.scroll-view_H .zero-item {
		width: 274rpx;
		height: 356rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
		border-radius: 8rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;

		box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(205, 205, 205, 0.5);
	}

	.scroll-view_H .zero-item:nth-child(1) {
		margin-left: 24rpx;
	}

	.scroll-view_H .zero-item .zero-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 8rpx;
	}

	.scroll-view_H .zero-item .zero-content image {
		width: 276rpx;
		height: 221rpx;
		border-radius: 8rpx;
	}

	.scroll-view_H .zero-item .zero-content .zer-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12rpx 12rpx;
		box-sizing: border-box;
	}

	.scroll-view_H .zero-item .zero-content .zer-info view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.scroll-view_H .zero-item .zero-content .zer-info view:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
	}

	.scroll-view_H .zero-item .zero-content .zer-info view:nth-child(3) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
	}

	.scroll-view_H .zero-item .zero-content .zer-info view:nth-child(3) text {
		text-decoration: line-through;
	}

	/* 其他好物 */
	.other-goods {
		width: 100%;
	}

	.other-goods .other-item:last-child .other-info {
		border-bottom: none !important;
	}

	.other-goods .other-item:last-child .other-info {
		border-bottom: none !important;
	}

	.other-item {
		width: 100%;
		height: 280rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.other-item image {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 8rpx;
	}

	.other-item .other-info {
		flex: 1;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: solid 1rpx #efefef;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.other-item .other-info view:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.other-item .other-info view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.other-item .other-info view:nth-child(2)>view:nth-child(1) {
		width: 160rpx;
		height: 56rpx;
		background-color: #f34930;
		box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(203, 41, 17, 0.5);
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #ffffff;
	}

	.other-item .other-info view:nth-child(2)>view:nth-child(2) text {
		font-size: 28rpx;
	}

	.other-item .other-info view:nth-child(2)>view:nth-child(2) text:last-child {
		color: #333333;
	}
</style>

<style>
	.place-search {
		color: #999999;
		letter-spacing: 1rpx;
		font-size: 28rpx;
	}
</style>
